<template>
    <div class="director-chart">
        <h3>导演影响力排行</h3>
        <div ref="chartContainer" style="width: 100%; height: 500px"></div>
    </div>
</template>

<script>
import { onMounted, onUnmounted, watch, ref } from "vue";
import * as echarts from "echarts";

export default {
    name: "DirectorChart",
    props: {
        data: {
            type: Array,
            required: true,
        },
    },
    setup(props) {
        const chartContainer = ref(null);
        let chart = null;

        const initChart = () => {
            if (!chartContainer.value) return;

            // 如果图表已经存在，销毁它
            if (chart) {
                chart.dispose();
            }

            // 初始化图表
            chart = echarts.init(chartContainer.value);

            // 设置响应式
            const resizeHandler = () => {
                chart && chart.resize();
            };
            window.addEventListener("resize", resizeHandler);

            // 在组件卸载时移除事件监听
            onUnmounted(() => {
                window.removeEventListener("resize", resizeHandler);
                chart && chart.dispose();
                chart = null;
            });

            // 监听数据变化，更新图表
            watch(() => props.data, updateChart, { deep: true });

            // 首次渲染
            updateChart();
        };

        const updateChart = () => {
            if (!chart) return;

            const directors = props.data.map((item) => item.name).slice(0, 15);
            const influence = props.data.map((item) => item.influence.toFixed(2)).slice(0, 15);

            // 颜色渐变
            const colors = [
                "#5470c6",
                "#91cc75",
                "#fac858",
                "#ee6666",
                "#73c0de",
                "#3ba272",
                "#fc8452",
                "#9a60b4",
                "#ea7ccc",
            ];

            const option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: { type: "shadow" },
                },
                grid: {
                    left: "5%", // 增加左侧边距，为导演名字留出更多空间
                    right: "5%",
                    bottom: "3%",
                    top: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "value",
                    name: "影响力指数",
                    nameLocation: "end",
                },
                yAxis: {
                    type: "category",
                    data: directors.reverse(),
                    axisLabel: {
                        interval: 0,
                        width: 120, // 设置固定宽度
                        overflow: "truncate", // 超出部分显示省略号
                        formatter: function (value) {
                            if (value.length > 6) {
                                return value.substring(0, 6) + "...";
                            }
                            return value;
                        },
                        align: "right", // 右对齐
                        padding: [0, 15, 0, 0], // 右侧添加padding
                        rich: {
                            value: {
                                width: 100,
                                align: "right",
                            },
                        },
                    },
                },
                series: [
                    {
                        name: "导演影响力",
                        type: "bar",
                        data: influence.reverse(),
                        itemStyle: {
                            color: function (params) {
                                // 使用渐变色
                                const colorIndex = params.dataIndex % colors.length;
                                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: colors[colorIndex] },
                                    { offset: 1, color: echarts.color.lift(colors[colorIndex], 0.3) },
                                ]);
                            },
                        },
                        label: {
                            show: true,
                            position: "right",
                            formatter: "{c}",
                            fontSize: 12,
                            fontWeight: "bold",
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                        barWidth: "60%",
                    },
                ],
            };

            chart.setOption(option);
        };

        onMounted(() => {
            initChart();
        });

        return { chartContainer };
    },
};
</script>

<style scoped>
.director-chart {
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.director-chart h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}
</style>
